<template>
    <div id="attribute" v-drag>
        <el-card class="box-card">
            <div slot="header" class="clearfix" align="center">
                查询结果
                <el-button style="float: right; padding: 3px 0" type="text">关闭</el-button>
            </div>
            <div>
                <div id="tableSearchDiv">
                    <el-form :inline="true">
                        <el-form-item label="查询字段">
                            <el-select placeholder="属性">
                                <el-option label="面积"></el-option>
                                <el-option label="ID"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-input id="searchInput" placeholder="输入关键字"></el-input>
                        </el-form-item>
                        <el-button type="primary">筛选</el-button>
                        <el-button type="primary">清除</el-button>
                    </el-form>
                </div>
                <el-table :data="tableData3" height="190px" border style="width: 100%">
                    <el-table-column prop="date" label="日期" width="180"></el-table-column>
                    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                    <el-table-column prop="address" label="地址"></el-table-column>
                </el-table>
                     <el-pagination
                        :page-size="100"
                        layout="prev, pager, next, jumper"
                        :total="1000">
                    </el-pagination>
            </div>
        </el-card>
    </div>   
</template>
<script>
export default {
       data() {
            return {
                tableData3: [{
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
            }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
            }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
            }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
            }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
            }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
            }],

            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value: '',
      }
    },
    methods:{
    
    },
    directives: {
        drag: {
            // 指令的定义
            bind: function (el) {
                let odiv = el;   //获取当前元素
                odiv.onmousedown = (e) => {
                    //算出鼠标相对元素的位置
                    let disX = e.clientX - odiv.offsetLeft;
                    let disY = e.clientY - odiv.offsetTop;
                    
                    document.onmousemove = (e)=>{
                        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                        let left = e.clientX - disX;    
                        let top = e.clientY - disY;
                      
                        //绑定元素位置到positionX和positionY上面
                        // this.positionX = top;
                        // this.positionY = left;
                
                        //移动当前元素
                        odiv.style.left = left + 'px';
                        odiv.style.top = top + 'px';
                        console.log( left + 'px');
                        console.log( top + 'px');
                    };
                    document.onmouseup = (e) => {
                        document.onmousemove = null;
                        document.onmouseup = null;
                    };
                };
            }
        }
    }
     
}
</script>



<style>
    #attribute{
        position:absolute;
        bottom:20px;
        right:20px;
        z-index:999;
        width:40%;
        height:35%;
        cursor:pointer;
    }

    #attribute .clearfix{
        font-size: 14px;
    }

    #attribute .text {
        font-size: 14px;
    }

    #attribute .el-card__body{
        padding:0px;
    }

    #attribute .item {
        margin-bottom: 10px;
    }

    #attribute .clearfix:before,
    #attribute .clearfix:after {
        display: table;
        content: "";
    }

    #attribute .clearfix:after {
        clear: both
    }

    #attribute .box-card {
        width: 100%;
        height:100%;
    }
    
    #attribute .el-card__header{
        padding:5px 5px;
        background-color: rgb(22, 133, 216);
        color: white;
    }

    #attribute .el-button span{
        color: white;
    }

    #attribute .el-input{
        width: 60px;
    }
    #attribute .el-input__inner{
        height: 25px;
        border-radius: 0px;
    }

    #attribute .el-button{
        height: 25px;
        border-radius: 0px;
    }
    #tableSearchDiv{
        float: right;
        margin-right:10px;
    }

    #tableSearchDiv .el-button{
        margin-top: 8px;
        padding-top:3px;
    }
    #attribute .el-form-item{
        margin-bottom: 0px;
    }

    #attribute .el-table td,#attribute .el-table th{
        padding:2px;
    }

    #attribute .el-table{
        height: 50%;
    }

    /* #searchInput{
        width:80px;
    } */
</style>
